<template>
  <div class="saying">
      <h2>我是Saying组件</h2>
      <h4>学校的校龄：{{school.age}}</h4>
      <button @click="addSaying">添加一个语录</button>
      <ul>
          <li v-for="saying in sayingList" :key="saying.id">{{saying.title}}</li>
      </ul>
  </div>
</template>

<script>
import {mapState} from 'vuex'
  export default {
      name:'Saying',
      methods: {
          addSaying(){
              this.$store.dispatch('addSaying')
          }
      },
      computed: {
        ...mapState(['sayingList','school'])
    }
  }
  
</script>

<style scoped>
  .saying{
      background-color: orange;
      padding: 20px;
  }
</style>